<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Add a gradient sky layer to a map</title>
	<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
	<script src="https://api.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.js"></script>
	<link href="https://api.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.css" rel="stylesheet" />
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.min.js"></script>
</head>
<body style="width:100%;height:100%;">

	<!-- 左右布局，左边包含上下布局 -->
	<div style="position: absolute; left:0px; top:0px; right:0px;bottom:0px;display:flex;flex-direction:row;width:100%;height:100%;">
	    <div style="display:flex;width:70%;;height:100%;">
			<div id="mapbox" style="width:100%;;height:100%;"></div>
		    <!-- 基于Mapbox的三维地形，以及全球	
			<pre id="info"></pre>
		    <div id="distance" class="distance-container"></div> -->
	    </div>		
	    <div style="display:flex;flex-direction:column;width:30%;height:100%;">
		    <div id="" style="display:flex;flex-direction:column;width:100%;height:30%;background-color:white;">
				<div style="width:100%;height:32px;background-color:gray;text-align:center;font-size:18px;font-weight:bold;">
				动态监测
				</div>
				<div style="width:100%;height:70%;overflow-y: auto;background-color:#555555;color:#88aaff;flex-grow:1;line-height:140%;">
					<div>- 2022年1月2日 13:00:00 用户上报数据</div>
					<div>- 2022年1月2日 13:00:00 用户上报数据</div>
					<div>- 2022年1月2日 13:00:00 用户上报数据</div>
					<div>- 2022年1月2日 13:00:00 用户上报数据</div>
					<div>- 2022年1月2日 13:00:00 用户上报数据</div>
					<div>- 2022年1月2日 13:00:00 用户上报数据</div>
					<div>- 2022年1月2日 13:00:00 用户上报数据</div>
					<div>- 2022年1月2日 13:00:00 用户上报数据</div>
					<div>- 2022年1月2日 13:00:00 用户上报数据</div>
					<div>- 2022年1月2日 13:00:00 用户上报数据</div>
					<div>- 2022年1月2日 13:00:00 用户上报数据</div>
					<div>- 2022年1月2日 13:00:00 用户上报数据</div>
					<div>- 2022年1月2日 13:00:00 用户上报数据</div>
					<div>- 2022年1月2日 13:00:00 用户上报数据</div>
					<div>- 2022年1月2日 13:00:00 用户上报数据</div>
				</div>
			</div>
			<!-- 基于echarts的平面区划地图，用于统计数据的渲染 -->
		    <div id="echartsmap" style="width:100%;height:70%;background-color:gray;">
			
			</div>
	    </div>	
	</div>
</body>

<script>
	    mapboxgl.accessToken = 'pk.eyJ1IjoibHh0aWFudGlhbiIsImEiOiJjaXd2ZjlkYnQwMTZvMnRtYWZnM2lpbHFvIn0.ef3rFZTr9psmLWahrqap2A';
	    var mapbox = new mapboxgl.Map({
	        container: 'mapbox',
	        zoom: 6,
	        center: [112.549248, 37.857014],
	        pitch: 25,
	        style: 'mapbox://styles/mapbox/satellite-v9',
	    });
	    mapbox.on('load', function () {
	    	mapbox.loadImage('./image/point.png',function(error, image) {
	            if (error) throw error;
	            if (!mapbox.hasImage('point')) mapbox.addImage('point', image);                     
	        });
	        mapbox.loadImage('./image/camera.png',function(error, image) {
	            if (error) throw error;
	            if (!mapbox.hasImage('camera')) mapbox.addImage('camera', image);                     
	        });
	        mapbox.loadImage('./image/monitor.png',function(error, image) {
	            if (error) throw error;
	            if (!mapbox.hasImage('monitor')) mapbox.addImage('monitor', image);                     
	        });

			//加载模型
			// mapbox.addLayer(customLayer, '线');
			//地形
			mapbox.addSource('mapbox-dem', {
				'type': 'raster-dem',
				'url': 'mapbox://mapbox.mapbox-terrain-dem-v1',
			});
			mapbox.setTerrain({ 'source': 'mapbox-dem', 'exaggeration': 1.5}); 	
			
			//渐变天空层
			mapbox.addLayer({
				'id': 'sky',
				'type': 'sky',
				'paint': {
					// set up the sky layer to use a color gradient
					'sky-type': 'gradient',
					// the sky will be lightest in the center and get darker moving radially outward
					// this simulates the look of the sun just below the horizon
					'sky-gradient': [
					'interpolate',
					['linear'],
					['sky-radial-progress'],
					0.8,
					'rgba(135, 206, 235, 1.0)',
					1,
					'rgba(0,0,0,0.1)'
					],
					'sky-gradient-center': [0, 0],
					'sky-gradient-radius': 90,
					'sky-opacity': [
					'interpolate',
					['exponential', 0.1],
					['zoom'],
					5,
					0,
					22,
					1
					]
				}
			});
			getInit();
			
		});
	    //移除不需要的数据源和图层
		function removeSourceLayer(){
			if (mapbox.getLayer('山西省边界线')) mapbox.removeLayer('山西省边界线');
			if (mapbox.getLayer('山西省区域文字')) mapbox.removeLayer('山西省区域文字');
			if (mapbox.getSource('山西省')) mapbox.removeSource('山西省');
			if (mapbox.getLayer('边界线')) mapbox.removeLayer('边界线');
			if (mapbox.getLayer('区域文字')) mapbox.removeLayer('区域文字');
			if (mapbox.getSource('区域')) mapbox.removeSource('区域');
			if (mapbox.getLayer('数据')) mapbox.removeLayer('数据');
	        if (mapbox.getSource('上报数据')) mapbox.removeSource('上报数据');

	        if (mapbox.getLayer('摄像头点位')) mapbox.removeLayer('摄像头点位');
	        if (mapbox.getSource('摄像头')) mapbox.removeSource('摄像头');

	        if (mapbox.getLayer('固定监测点点位')) mapbox.removeLayer('固定监测点点位');
	        if (mapbox.getSource('固定监测点')) mapbox.removeSource('固定监测点');

	        if (mapbox.getLayer('监测样地图层')) mapbox.removeLayer('监测样地图层');
	        if (mapbox.getSource('监测样地')) mapbox.removeSource('监测样地');
		}

	    //山西数据初始化
		function getInit(){
			removeSourceLayer();
			mapbox.addSource('山西省', {
	            'type': 'geojson',
	            'data': './data/140000.json'
	        });
	        mapbox.addLayer(
	            {
	                'id': '山西省边界线',
	                'source': '山西省',
	                'type': 'line',
	                'layout': {
	                    'line-join': 'round',
	                    'line-cap': 'round'
	                },
	                'paint': {
	                    'line-color': 'yellow',
	                    'line-width': 3
	                },
	                'visibility':'none'
	            },
	        );
	        mapbox.addLayer(
	            {
	                'id': '山西省区域文字',
	                'source': '山西省',
	                'type': 'symbol',
	                'layout': {
	                	'text-field': ['get','name'],
	                },
	                'paint': {
						'text-color':'#fff',
						"text-halo-width": 1,
						"text-halo-color": '#000'
					},
	                'visibility':'none'
	            },
	        );
	        mapbox.flyTo({
			  center: [112.549248, 37.857014], // 中心点
			  zoom: 6, // 缩放比例
			  pitch: 25 // 倾斜度
		    });
			
		}
		function toMapbox(code,zoom){
			removeSourceLayer();
	    	mapbox.addSource('区域', {
	            'type': 'geojson',
	            'data': './data/'+code+'.json'
	        });
	        mapbox.addLayer(
	            {
	                'id': '边界线',
	                'source': '区域',
	                'type': 'line',
	                'layout': {
	                    'line-join': 'round',
	                    'line-cap': 'round'
	                },
	                'paint': {
	                    'line-color': 'yellow',
	                    'line-width': 3
	                },
	                'visibility':'none'
	            },
	        );
	        mapbox.addLayer(
	            {
	                'id': '区域文字',
	                'source': '区域',
	                'type': 'symbol',
	                'layout': {
	                	'text-field': ['get','name'],
	                },
	                'paint': {
						'text-color':'#fff',
						"text-halo-width": 1,
						"text-halo-color": '#000'
					},
	                'visibility':'none'
	            },
	        );
	        $.get('./data/'+code+'.json',{},function(res){
	        
	        	//获取区域中心点
	        	var center = res['features'][0]['properties']['center'];
		        mapbox.flyTo({
					  center: center, // 中心点
					  zoom: zoom, // 缩放比例
					  pitch: 45 // 倾斜度
				})

		        //********* 上报数据 ********/
				mapbox.addSource('上报数据', {
		            'type': 'geojson',
		            'data': "./data/上报数据.geojson"
		        });
		        mapbox.addLayer(
		            {
		                'id': '数据',
		                'source': '上报数据',
		                'type': 'symbol',
		                "layout": {
		                    'text-field':'',
		                    'icon-image': 'point',
		                    'icon-size':0.2,
		                    'text-size': 15,
		                    "text-offset": [0, 1.6],     /* 该属性表示文本偏移锚点的距离，正值表示向右和向下，负值表示向左和向上 */
		                    "text-anchor": "top" ,       /* 该属性设置文本中最接近锚点的部分，top表示文本的顶端放置到最接近锚点的位置 */
		                },
		                'paint': {
		                    'text-color':'#fff',
		                    "text-halo-width": 1,
		                    "text-halo-color": '#000'

		                    
		                },
		                'visibility':'visible'
		            }
		        );
		        // 点击marker弹出信息框
		        mapbox.on('click', '数据', (e) => {
		        	var user_name = e.features[0].properties.user_name;
		        	var content = e.features[0].properties.content;

					new mapboxgl.Popup()
					.setLngLat(e.lngLat)
					.setHTML(
						  `
				  			<div><h2>上报数据 </h2></div>
				  			<p>上&ensp;报&ensp;人：${user_name}</p>
	                        <div class="markerBody" ><p>上报内容：${content}</p>
	                        <p>上报地址：兴安盟乌兰浩特市</p>
	                        <p>电&emsp;&emsp;话：0311-2564558</p></div>
	                       `
						)
					.addTo(mapbox);
				});
                // ********* 摄像头 ********* /
				mapbox.addSource('摄像头', {
		            'type': 'geojson',
		            'data': "./data/摄像头.geojson"
		        });

		        mapbox.addLayer(
		            {
		                'id': '摄像头点位',
		                'source': '摄像头',
		                'type': 'symbol',
		                "layout": {
		                    'text-field':'',
		                    'icon-image': 'camera',
		                    'icon-size':0.2,
		                    'text-size': 15,
		                    "text-offset": [0, 1.6],     /* 该属性表示文本偏移锚点的距离，正值表示向右和向下，负值表示向左和向上 */
		                    "text-anchor": "top" ,       /* 该属性设置文本中最接近锚点的部分，top表示文本的顶端放置到最接近锚点的位置 */
		                },
		                'paint': {
		                    'text-color':'#fff',
		                    "text-halo-width": 1,
		                    "text-halo-color": '#000'

		                    
		                },
		                'visibility':'visible'
		            }
		        );
		        //********* 固定监测点 ********* /
		        mapbox.addSource('固定监测点', {
		            'type': 'geojson',
		            'data': "./data/固定监测点.geojson"
		        });
		        mapbox.addLayer(
		            {
		                'id': '固定监测点点位',
		                'source': '固定监测点',
		                'type': 'symbol',
		                "layout": {
		                    'text-field':'',
		                    'icon-image': 'monitor',
		                    'icon-size':0.2,
		                    'text-size': 15,
		                    "text-offset": [0, 1.6],     /* 该属性表示文本偏移锚点的距离，正值表示向右和向下，负值表示向左和向上 */
		                    "text-anchor": "top" ,       /* 该属性设置文本中最接近锚点的部分，top表示文本的顶端放置到最接近锚点的位置 */
		                },
		                'paint': {
		                    'text-color':'#fff',
		                    "text-halo-width": 1,
		                    "text-halo-color": '#000'

		                    
		                },
		                'visibility':'visible'
		            }
		        );

		        //********* 监测样地 ********* /
		        mapbox.addSource('监测样地', {
		            'type': 'geojson',
		            'data': "./data/监测样地.geojson"
		        });
		        mapbox.addLayer(
		            {
		                'id': '监测样地图层',
		                'source': '监测样地',
		                'type': 'fill',
		                'paint': {
		                    'fill-color': '#ff6600',
		                    'fill-opacity': 0.8
		                },
		                'visibility':'visible'
		            },
		        );


	        }).fail(function () {

	            alert('暂无【'+code+'】的geojson数据，可查看大同市（云冈区、平城区、新荣区）');
	        });
	    }

</script>

<script>
	var myChart = echarts.init(document.getElementById('echartsmap'));
	var cityProper = {
		'太原市': './data/chengyang.json',
		'大同市': './data/laoshan.json',
		'李沧区': 'js/licang.json',
		'市北区': 'js/shibei.json',
		'市南区': 'js/shinan.json',
		'黄岛区': 'js/huangdao.json',
		'胶州市': 'js/jiaozhou.json',
		'即墨市': 'js/jimo.json',
		'莱西市': 'js/laixi.json',
		'平度市': 'js/pingdu.json'
	};	
	var data = [{
		name: '太原市', value: 20057.34}, {
		name: '大同市', value: 20057.34}, {
		name: '李沧区', value: 20057.34}, {
		name: '市北区', value: 20057.34}, {
		name: '市南区', value: 20057.34}, {
		name: '黄岛区', value: 20057.34}, {
		name: '胶州市', value: 20057.34}, {
		name: '即墨市', value: 20057.34}, {
		name: '莱西市', value: 20057.34}, {
		name: '平度市', value: 20057.34
	}];

	var level = 0;
			 
	function chartReset(){ 
		if (level > 0){
		 	getInit();
		}

		myChart.showLoading();//显示加载中 	
		$.get('./data/140000.json', function (geoJson) {
			myChart.hideLoading();//完成加载
		
			echarts.registerMap('140000', geoJson);

			option = {
				title: {
					text: '发生防治情况',
					subtext: '（2022年3月）',
					sublink:
					'javascript:alert();'
				},
				tooltip: {
					trigger: 'item',
					formatter: '{b}<br/>{c} (p / km2)'
				},
				toolbox: {
					show: true,
					orient: 'vertical',
					left: 'right',
					top: 'center',
					feature: {
						dataView: { readOnly: false },
						restore: {},
						saveAsImage: {}
					}
				},
				visualMap: {
					min: 800,
					max: 50000,
					text: ['High', 'Low'],
					realtime: false,
					calculable: true,
					inRange: {
						color: ['lightskyblue', 'yellow', 'orangered']
					}
				},
				series: [{
					name: '虫口密度',
					type: 'map',
					map: '140000',
					label: {
						show: true
					},
					roam: true,
					selectedMode: 'single',
					data: [
						{ name: '太原市', code:'140100',value: 20057.34 },
						{ name: '大同市', code:'140200',value: 15477.48 },
						{ name: '朔州市', code:'140600',value: 15477.48 },
						{ name: '忻州市', code:'140900',value: 15477.48 },
						{ name: '吕梁市', code:'141100',value: 15477.48 },
						{ name: '阳泉市', code:'140300',value: 15477.48 },
						{ name: '晋中市', code:'140700',value: 15477.48 },
						{ name: '临汾市', code:'141000',value: 15477.48 },
						{ name: '长治市', code:'140400',value: 15477.48 },
						{ name: '晋城市', code:'140500',value: 15477.48 },
						{ name: '运城市', code:'140800',value: 15477.48 }
					],
					// 自定义名称映射
					nameMap: {
						'太原市': '太原市',
						'大同市': '大同市'
					}/**/
				}]
			};
			myChart.setOption(option);

		
			myChart.on("click", chartClick);

		});
	}	

	myChart.getZr().on('click', params => {
		
		if(params.target) {

		//alert('画布非空白区');  
		} else {
		//alert('画布空白区'); 
			chartReset();
		}
	});
	function chartClick(param){ 
		//移动到mapbox相应位置
		// if(param.data.code==''){
		// 	var code = param.data.code;
		// }else{
		// 	var code = 141100;
		// }
		if(param.data !=undefined){
			var code = param.data.code;
			var zoom = 7;
			level = 1;
		}else{
			var code = param.name;
			var zoom = 9;
			level = 2;

		}
		toMapbox(code,zoom);

		myChart.setOption(option, false); 
		var selectedPro = param.data.code;
		if(selectedPro==""){
			chartReset();
		}
		//alert(selectedPro);
		/*if (!cityProper[selectedPro]) {
		option.series.splice(1);
		option.legend = null;
		option.visualMap = null;
		myChart.setOption(option, true);
		return;
		}*/

		//获取点击区域数据
		$.get("./data/"+selectedPro+".json", function(geojson) {
			echarts.registerMap(selectedPro, geojson);
			//根据需求，如果要替换青岛地图，series参数为[0]，不替换为[1],其中left、top自己设置。
			option.series[0] = {
				name: '选择器',
				type: 'map',
				mapType: selectedPro,
				//left: '20%',
				//top: '20%',
				//width: '18%',
				roam: true,
				selectedMode: 'single',
				itemStyle: {
				normal: {
				 label: {
				     show: true
				 }
				},
				emphasis: {
				 label: {
				     show: true
				 }
				}
				},
				data: data
			};
			myChart.setOption(option, true);
		})
	};	
	chartReset(); //重设地图报表
</script>

	

</body>
</html>